<template>
  <el-table
    highlight-current-row
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="序号" width="65"></el-table-column>
    <el-table-column prop="innerCode" label="设备编号" width="120"></el-table-column>
    <el-table-column prop="type.name" label="设备型号" width="120"></el-table-column>
    <el-table-column prop="node.addr" label="详细地址" show-overflow-tooltip></el-table-column>
    <el-table-column prop="ownerName" label="合作商" show-overflow-tooltip></el-table-column>
    <el-table-column prop="vmStatus" label="设备状态" :formatter="formatterFn" show-overflow-tooltip></el-table-column>
    <el-table-column prop label="操作" show-overflow-tooltip>
      <template #default="{row}">
        <el-button type="text">货道</el-button>
        <el-button type="text">策略</el-button>
        <el-button type="text" @click="revisevm(row)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import vm from '@/Enums/vm'
export default {
  name: 'EmperorKedeIndexBodytable',
  props: {
    tableData: {
      type: Array,
      default: () => [],
      required: true
    }
  },
  data () {
    return {}
  },

  mounted () {
    this.thisvmStatus = vm.thisvmStatus
  },

  methods: {
    formatterFn (row, column, cellValue, index) {
      //  console.log('cellValue'，cellValue) // 聘用形式
      // cellValue 0，1
      // You，1 second ago
      // [{id: 1，value:正式'}，[J]
      // 把拿到的数据进行遍历查找
      const info = this.thisvmStatus.find((item) => item.id === cellValue)
      // .find 返回的是 一个对象
      // 处理方法 判断 info 有没有数据  只有有数据 才渲染
      return (info && info.value) || '撤机'
    },
    // 点击修改传值
    revisevm (row) {
      console.log(row)
      this.$emit('revisevm', row)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
